<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="420"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.lineWidth = 2;
        ctx.font = "16px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const black_dot_radius = 4;

        // --- Component Coordinates ---
        const v_source_x = 250, v_source_y = 50;
        const j1_x = 100, j1_y = 120;
        const resistor_x = 150, resistor_y = 120;
        const c_x = 280, c_y = 180;
        const b_x = 150, b_y = 230;
        const a_x = 150, a_y = 300;
        const switch_pivot_y_x = 320, switch_pivot_y_y = 280;
        const switch_arm_x_x = 180, switch_arm_x_y = 260;
        const motor_x = 350, motor_y = 340;
        const right_wire_x = 400;

        // --- Drawing ---

        // 1. Voltage Source
        ctx.fillText("12 V", v_source_x, v_source_y - 20);
        ctx.beginPath();
        ctx.arc(v_source_x - 20, v_source_y, 5, 0, 2 * Math.PI); // Left terminal
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(v_source_x + 20, v_source_y, 5, 0, 2 * Math.PI); // Right terminal
        ctx.stroke();

        // 2. Main Wires
        ctx.beginPath();
        // Top wire
        ctx.moveTo(j1_x, v_source_y);
        ctx.lineTo(v_source_x - 20, v_source_y);
        ctx.moveTo(v_source_x + 20, v_source_y);
        ctx.lineTo(right_wire_x, v_source_y);
        // Right vertical wire (return path)
        ctx.moveTo(right_wire_x, v_source_y);
        ctx.lineTo(right_wire_x, 370);
        // Left vertical wire (to junction)
        ctx.moveTo(j1_x, v_source_y);
        ctx.lineTo(j1_x, j1_y);
        ctx.stroke();
        
        // 3. Junction and Paths to Switch Contacts
        // Junction dot
        ctx.beginPath();
        ctx.arc(j1_x, j1_y, black_dot_radius, 0, 2 * Math.PI);
        ctx.fill();

        // Path to Resistor and Point C
        ctx.beginPath();
        ctx.moveTo(j1_x, j1_y);
        ctx.lineTo(resistor_x, resistor_y);
        ctx.stroke();
        // Resistor symbol
        ctx.strokeRect(resistor_x, resistor_y - 10, 80, 20);
        ctx.beginPath();
        ctx.moveTo(resistor_x + 80, resistor_y);
        ctx.lineTo(c_x, resistor_y);
        ctx.lineTo(c_x, c_y);
        ctx.stroke();
        // Point C
        ctx.beginPath();
        ctx.arc(c_x, c_y, black_dot_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("C", c_x + 15, c_y);

        // Path to Point B
        ctx.beginPath();
        ctx.moveTo(j1_x, j1_y);
        ctx.lineTo(j1_x, b_y);
        ctx.lineTo(b_x, b_y);
        ctx.stroke();
        // Point B
        ctx.beginPath();
        ctx.arc(b_x, b_y, black_dot_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("B", b_x + 15, b_y - 5);

        // Point A
        ctx.beginPath();
        ctx.arc(a_x, a_y, black_dot_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("A", a_x - 15, a_y);

        // 4. Switch
        // Arm
        ctx.beginPath();
        ctx.moveTo(switch_arm_x_x, switch_arm_x_y);
        ctx.lineTo(switch_pivot_y_x, switch_pivot_y_y);
        ctx.stroke();
        // Labels
        ctx.fillText("X", switch_arm_x_x - 15, switch_arm_x_y);
        ctx.fillText("Y", switch_pivot_y_x, switch_pivot_y_y + 15);

        // Movement Arrow
        ctx.beginPath();
        const arrow_radius = 65;
        const start_angle = Math.PI * 0.95;
        const end_angle = Math.PI * 1.3;
        ctx.arc(switch_pivot_y_x, switch_pivot_y_y, arrow_radius, start_angle, end_angle);
        
        // Arrowhead at start
        let tip_x1 = switch_pivot_y_x + arrow_radius * Math.cos(start_angle);
        let tip_y1 = switch_pivot_y_y + arrow_radius * Math.sin(start_angle);
        let tangent1 = start_angle + Math.PI / 2;
        ctx.moveTo(tip_x1, tip_y1);
        ctx.lineTo(tip_x1 + 10 * Math.cos(tangent1 - Math.PI / 6), tip_y1 + 10 * Math.sin(tangent1 - Math.PI / 6));
        ctx.moveTo(tip_x1, tip_y1);
        ctx.lineTo(tip_x1 + 10 * Math.cos(tangent1 + Math.PI / 6), tip_y1 + 10 * Math.sin(tangent1 + Math.PI / 6));

        // Arrowhead at end
        let tip_x2 = switch_pivot_y_x + arrow_radius * Math.cos(end_angle);
        let tip_y2 = switch_pivot_y_y + arrow_radius * Math.sin(end_angle);
        let tangent2 = end_angle - Math.PI / 2;
        ctx.moveTo(tip_x2, tip_y2);
        ctx.lineTo(tip_x2 + 10 * Math.cos(tangent2 - Math.PI / 6), tip_y2 + 10 * Math.sin(tangent2 - Math.PI / 6));
        ctx.moveTo(tip_x2, tip_y2);
        ctx.lineTo(tip_x2 + 10 * Math.cos(tangent2 + Math.PI / 6), tip_y2 + 10 * Math.sin(tangent2 + Math.PI / 6));
        ctx.stroke();

        // 5. Motor
        // Circle
        ctx.beginPath();
        ctx.arc(motor_x, motor_y, 25, 0, 2 * Math.PI);
        ctx.stroke();
        // "M" label
        ctx.fillText("M", motor_x, motor_y);

        // 6. Final Connections
        // From Switch Pivot Y to Motor
        ctx.beginPath();
        ctx.moveTo(switch_pivot_y_x, switch_pivot_y_y);
        ctx.lineTo(motor_x, switch_pivot_y_y);
        ctx.lineTo(motor_x, motor_y - 25); // Connect to top of motor
        ctx.stroke();
        // From Motor to return wire
        ctx.beginPath();
        ctx.moveTo(motor_x, motor_y + 25); // From bottom of motor
        ctx.lineTo(motor_x, 370);
        ctx.lineTo(right_wire_x, 370);
        ctx.stroke();

        // Figure Caption
        ctx.fillText("Fig. 9.1", 250, 405);

    </script>
</body>
</html>